@import "base/environment";

.ActAs__body {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.ActAs__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: $ic-sp*15;
}

.ActAs__svgContainer {
  position: relative;
  height: $ic-sp*12;
  width: $ic-sp*8;
}

.ActAs__svg {
  position: absolute;
  height: 100%;
  width: 100%;
}

.ActAs__mask {
  filter: drop-shadow(0px 0px 2px rgba(0,0,0,.75));
  animation: pandaMasquerade 3s infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease-in-out;
}

@keyframes pandaMasquerade {
  0% { transform: rotate(0deg) translate3d(0px,0px,0px); }
  33% { transform: rotate(0deg) translate3d(0px,0px,0px); }
  66% { transform: rotate(-20deg) translate3d(-100px,0px,0px); }
  100% { transform: rotate(-20deg) translate3d(-100px,0px,0px); }
}

.ActAs__mask-1 {
  fill: #faa441;
}

.ActAs__mask-1,
.ActAs__mask-2 {
  stroke: #8d642c;
}

.ActAs__mask-1,
.ActAs__mask-3,
.ActAs__mask-10 {
  stroke-width: 2px;
}

.ActAs__mask-2,
.ActAs__mask-4,
.ActAs__mask-7,
.ActAs__mask-10 {
  fill: none;
}

.ActAs__mask-2 {
  opacity: .7;
}

.ActAs__mask-3,
.ActAs__mask-6 {
  fill: #fff;
}

.ActAs__mask-3,
.ActAs__mask-10 {
  stroke: #822b00;
}

.ActAs__mask-4 {
  stroke: #b1703f;
  stroke-width: 10px;
}

.ActAs__mask-4,
.ActAs__mask-7 {
  stroke-linecap: round;
}

.ActAs__mask-5 {
  fill: #b1703f;
}

.ActAs__mask-7 {
  stroke: #86939d;
  stroke-width: 5px;
}

.ActAs__mask-8 {
  fill:#822b00;
}

.ActAs__mask-9 {
  fill:#999;
}

.ActAs__panda-1,
.ActAs__panda-6 {
  fill: #fff;
}

.ActAs__panda-1,
.ActAs__panda-2 {
  stroke: #32434f;
  stroke-width:2px;
}

.ActAs__panda-2,
.ActAs__panda-5 {
  fill: #3f5463;
}

.ActAs__panda-3 {
  fill: #32434f;
}

.ActAs__panda-4 {
  fill: none;
  stroke: #86939d;
  stroke-linecap: round;
  stroke-width:5px
}

.ActAs__panda-7 {
  fill: #999;
}
